window.onload = function () {
    //initMyImgShow();
}

function closeMyImg() {
    $(".popup").remove();
}

function removeMyImg() {
    $(".popup").remove();
}

function initMyImgShow() {
    $('.z_addImg img').unbind("click").bind('click', function (event) {
        var isbig = $(this).data("big") + "";
        if ("false" == isbig) {
            return;
        }
        var myImg = new Image;
        myImg.src = $(this).attr("src");
        var srcThis = $(this).attr("src");
        var bg = "";
        bg += '<div id="popup" class="popup">';


        bg += '<div class="container">'
        bg += '    <div class="row">'
        bg += '      <div class="col-md-9">'
        bg += '       <div class="bg img-container">'
        bg += '        <img  id="image"  src="' + myImg.src + '" alt="" />';
        bg += '       </div>'
        bg += '      </div>'
        bg += '      <div class="col-md-3">'
        bg += '         <div class="docs-preview clearfix">'
        bg += '         <div class="img-preview preview-lg">'
        bg += '      </div>'
        bg += '         <div class="docs-data">'
        bg += '          <div class="input-group input-group-sm">'
        bg += '            <span class="input-group-prepend">'//选框的X轴
        bg += '              <label class="input-group-text" for="dataX">X</label>'
        bg += '            </span>'
        bg += '            <input type="text" class="form-control" id="dataX" placeholder="x">'
        bg += '            <span class="input-group-append">'
        bg += '              <span class="input-group-text">px</span>'
        bg += '            </span>'
        bg += '          </div>'
        bg += '          <div class="input-group input-group-sm">'
        bg += '            <span class="input-group-prepend">'
        bg += '              <label class="input-group-text" for="dataY">Y</label>'
        bg += '            </span>'
        bg += '            <input type="text" class="form-control" id="dataY" placeholder="y">'
        bg += '            <span class="input-group-append">'
        bg += '              <span class="input-group-text">px</span>'
        bg += '            </span>'
        bg += '          </div>'
        bg += '          <div class="input-group input-group-sm">'
        bg += '            <span class="input-group-prepend">'
        bg += '              <label class="input-group-text" for="dataWidth">Width</label>'
        bg += '            </span>'
        bg += '            <input type="text" class="form-control" id="dataWidth" placeholder="width">'
        bg += '            <span class="input-group-append">'
        bg += '              <span class="input-group-text">px</span>'
        bg += '            </span>'
        bg += '          </div>'
        bg += '          <div class="input-group input-group-sm">'
        bg += '            <span class="input-group-prepend">'
        bg += '              <label class="input-group-text" for="dataHeight">Height</label>'
        bg += '            </span>'
        bg += '            <input type="text" class="form-control" id="dataHeight" placeholder="height">'
        bg += '            <span class="input-group-append">'
        bg += '              <span class="input-group-text">px</span>'
        bg += '            </span>'
        bg += '          </div>'
        bg += '          <div class="input-group input-group-sm">'
        bg += '            <span class="input-group-prepend">'
        bg += '              <label class="input-group-text" for="dataRotate">Rotate</label>'
        bg += '            </span>'
        bg += '            <input type="text" class="form-control" id="dataRotate" placeholder="rotate">'
        bg += '            <span class="input-group-append">'
        bg += '              <span class="input-group-text">deg</span>'
        bg += '            </span>'
        bg += '          </div>'
        bg += '          <div class="input-group input-group-sm">'
        bg += '            <span class="input-group-prepend">'
        bg += '              <label class="input-group-text" for="dataScaleX">ScaleX</label>'
        bg += '            </span>'
        bg += '            <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX">'
        bg += '          </div>'
        bg += '          <div class="input-group input-group-sm">'
        bg += '            <span class="input-group-prepend">'
        bg += '              <label class="input-group-text" for="dataScaleY">ScaleY</label>'
        bg += '            </span>'
        bg += '            <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY">'
        bg += '          </div>'
        bg += '        </div>'
        bg += '    </div>'




        bg += '    </div>'
        bg += '    <div class="row" id="actions">'
        bg += '      <div class="col-md-9 docs-buttons">'
        bg += '        <div class="btn-group">'
        bg += '          <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">'
        bg += '            <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(-45)">'
        bg += '              <span class="fa fa-rotate-left"></span>'
        bg += '            </span>'
        bg += '          </button>'
        bg += '          <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">'
        bg += '            <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotate(45)">'
        bg += '              <span class="fa fa-rotate-right"></span>'
        bg += '            </span>'
        bg += '          </button>'
        bg += '        </div>'
        bg += ''
        bg += '      </div>'
        bg += '      </div><!-- /.docs-toggles -->'
        bg += '    </div>'

        bg += '  </div>'
        bg += '</div>';

        //$(this).parent().after(bg);
        $("body").append(bg);

        'use strict';

        var console = window.console || { log: function () {} },
            $alert = $('.docs-alert'),
            $message = $alert.find('.message'),
            showMessage = function (message, type) {
                $message.text(message);

                if (type) {
                    $message.addClass(type);
                }

                $alert.fadeIn();

                setTimeout(function () {
                    $alert.fadeOut();
                }, 3000);
            };

        // Demo
        // -------------------------------------------------------------------------

        (function () {
            var $image = $('.img-container > img'),
                $dataX = $('#dataX'),
                $dataY = $('#dataY'),
                $dataHeight = $('#dataHeight'),
                $dataWidth = $('#dataWidth'),
                $dataRotate = $('#dataRotate'),
                options = {
                    // strict: false,
                    // responsive: false,
                    // checkImageOrigin: false

                    // modal: false,
                    // guides: false,
                    // highlight: false,
                    // background: false,

                    // autoCrop: false,
                    // autoCropArea: 0.5,
                    // dragCrop: false,
                    // movable: false,
                    // resizable: false,
                    // rotatable: false,
                    // zoomable: false,
                    // touchDragZoom: false,
                    // mouseWheelZoom: false,

                    // minCanvasWidth: 320,
                    // minCanvasHeight: 180,
                    // minCropBoxWidth: 160,
                    // minCropBoxHeight: 90,
                    // minContainerWidth: 320,
                    // minContainerHeight: 180,

                    // build: null,
                    // built: null,
                    // dragstart: null,
                    // dragmove: null,
                    // dragend: null,
                    // zoomin: null,
                    // zoomout: null,

                    aspectRatio: 1 / 1,
                    preview: '.img-preview',
                    crop: function (data) {
                        $dataX.val(Math.round(data.x));
                        $dataY.val(Math.round(data.y));
                        $dataHeight.val(Math.round(data.height));
                        $dataWidth.val(Math.round(data.width));
                        $dataRotate.val(Math.round(data.rotate));
                    }
                };

            $image.on({
                'build.cropper': function (e) {
                    console.log(e.type);
                },
                'built.cropper': function (e) {
                    console.log(e.type);
                },
                'dragstart.cropper': function (e) {
                    console.log(e.type, e.dragType);
                },
                'dragmove.cropper': function (e) {
                    console.log(e.type, e.dragType);
                },
                'dragend.cropper': function (e) {
                    console.log(e.type, e.dragType);
                },
                'zoomin.cropper': function (e) {
                    console.log(e.type);
                },
                'zoomout.cropper': function (e) {
                    console.log(e.type);
                }
            }).cropper(options);


            // Methods
            $(document.body).on('click', '[data-method]', function () {
                var data = $(this).data(),
                    $target,
                    result;

                if (data.method) {
                    data = $.extend({}, data); // Clone a new one

                    if (typeof data.target !== 'undefined') {
                        $target = $(data.target);

                        if (typeof data.option === 'undefined') {
                            try {
                                data.option = JSON.parse($target.val());
                            } catch (e) {
                                console.log(e.message);
                            }
                        }
                    }

                    result = $image.cropper(data.method, data.option);

                    if (data.method === 'getCroppedCanvas') {
                        $('#getCroppedCanvasModal').modal().find('.modal-body').html(result);
                    }

                    if ($.isPlainObject(result) && $target) {
                        try {
                            $target.val(JSON.stringify(result));
                        } catch (e) {
                            console.log(e.message);
                        }
                    }

                }
            }).on('keydown', function (e) {

                switch (e.which) {
                    case 37:
                        e.preventDefault();
                        $image.cropper('move', -1, 0);
                        break;

                    case 38:
                        e.preventDefault();
                        $image.cropper('move', 0, -1);
                        break;

                    case 39:
                        e.preventDefault();
                        $image.cropper('move', 1, 0);
                        break;

                    case 40:
                        e.preventDefault();
                        $image.cropper('move', 0, 1);
                        break;
                }

            });


            // Import image
            var $inputImage = $('#inputImage'),
                URL = window.URL || window.webkitURL,
                blobURL;

            if (URL) {
                $inputImage.change(function () {
                    var files = this.files,
                        file;

                    if (files && files.length) {
                        file = files[0];

                        if (/^image\/\w+$/.test(file.type)) {
                            blobURL = URL.createObjectURL(file);
                            $image.one('built.cropper', function () {
                                URL.revokeObjectURL(blobURL); // Revoke when load complete
                            }).cropper('reset', true).cropper('replace', blobURL);
                            $inputImage.val('');
                        } else {
                            showMessage('Please choose an image file.');
                        }
                    }
                });
            } else {
                $inputImage.parent().remove();
            }


            // Options
            $('.docs-options :checkbox').on('change', function () {
                var $this = $(this);

                options[$this.val()] = $this.prop('checked');
                $image.cropper('destroy').cropper(options);
            });


            // Tooltips
            $('[data-toggle="tooltip"]').tooltip();

        }());

    })


}


